<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/util.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="p-10">
		<h1>函数</h1>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>普通函数</h3>
					<h3>默认参数</h3>
					<h3>剩余参数</h3>
					<h3>this</h3>
					<h3>作用域</h3>
					<button onclick="test01()">作用域</button>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>箭头函数</h3>
					<h3>闭包</h3>
					<button onclick="test02()">闭包</button>
					<button onclick="test11()">测题1</button>
					<button onclick="test12()">测题2</button>
					<button onclick="test13()">测题3</button>
					<h3>非闭包点击事件</h3>
					<div id="div2">
						<button>红色</button>
						<button>绿色</button>
						<button>蓝色</button>
					</div>
					<h3>闭包点击事件</h3>
					<div id="div3">
						<button>红色</button>
						<button>绿色</button>
						<button>蓝色</button>
					</div>
					<h3>let点击事件</h3>
					<div id="div4">
						<button>红色</button>
						<button>绿色</button>
						<button>蓝色</button>
					</div>
				</section>
			</div>
			<div class="col-1">
				<ul id="log" class="d-list mt-10"></ul>
			</div>
		</div>
		<script>
			var name = "Tom";

			function test01() {
				console.log(name);
				f01()();
			}

			function f01() {
				var age = 10;

				function f02() {
					console.log(age);
				}
				age = 20;
				return f02;
			}

			function test02() {
				var fn = f04();
				fn();
				fn();
				// f03();
			}

			function f02() {
				var age = 10;
				var name = "Jack";
				var sex = true;

				function f03() {
					console.log(age);
					var birth = new Date();

					function f04() {
						console.log(age, birth);
					}
					f04();
				}
				age = 11;
				f03();
				age = 12;
				return f03;
			}

			function f03() {
				var a = 1;
				var b = 2;

				function f04() {
					var c = 3;
					var d = 4;

					function f05() {
						var e = 5;
						console.log(e);
					}

					function f06() {
						console.log(c);
					}

					function f07() {
						console.log(c, d);
					}

					function f08() {
						console.log(a, c);
					}

					function f09() {
						console.log(a, c, name);
					}

					console.log(c);
					console.log(a, c);
					f05();
					f06();
					f07();
					f08();
					f09();
				}

				console.log(a, b);
				f04();
			}

			function f04() {
				var age = 1;

				function add() {
					console.log(++age);
				}
				return add;
			}

			function test11() {
				var a = exam11(0); //undefined
				a.exam11(1); // 0
				a.exam11(2); // 0
				a.exam11(3); // 0

				var b = exam11(0) //undefined
					.exam11(1) // 0
					.exam11(2) // 1
					.exam11(3); // 2

				var c = exam11(0) // undefined
					.exam11(1); // 0
				c.exam11(2); // 1
				c.exam11(3); // 1
			}

			function exam11(n, o) {
				console.log(o);
				return {
					exam11: function(m) {
						return exam11(m, n);
					}
				}
			}

			function test12() {

			}

			function test13() {

			}

			function initColorsClick1() {
				var btns = document.getElementById("div2").getElementsByTagName("button");
				for (var i = 0; i < btns.length; i++) {
					btns[i].onclick = function() {
						console.log(i);
					}
				}
			}

			function initColorsClick2() {
				var btns = document.getElementById("div3").getElementsByTagName("button");
				for (var i = 0; i < btns.length; i++) {
					(function() {
						var j = i;
						btns[j].onclick = function() {
							console.log(j);
						}
					})();
				}

				function f1(index) {
					btns[index].onclick = function() {
						console.log(index);
					};
				}
				// for (var i = 0; i < btns.length; i++) {
				// 	(function(index) {
				// 		btns[index].onclick = function() {
				// 			console.log(index);
				// 		};
				// 	})(i);
				// }
			}

			function initColorsClick3() {
				var btns = document.getElementById("div4").getElementsByTagName("button");
				for (let i = 0; i < btns.length; i++) {
					btns[i].onclick = function() {
						console.log(i);
					};
				}
			}
			initColorsClick1();
			initColorsClick2();
			initColorsClick3();
		</script>
	</body>
</html>
